var username=getCookie("username")
var into1=document.querySelector('.into1  a')
var into=document.querySelector('.into1 ')
var into2=document.querySelector('.into2  a')
if(username){
    into.style.marginLeft='165px'
    into2.innerHTML=` <a href="javascript:;" class="logout">退出</a>`
    into1.innerHTML=`<a href="javascript:;" style="color:red;">${username}</a>`
    into2.querySelector('a.logout').onclick = function(){
        if(!confirm('你确定要离开吗？')){
            return false
        }
        removeCookie('username')
        into.style.marginLeft='219px'
        into1.innerHTML=`<a href="login.html">登录</a>`
        into2.innerHTML = `<a href="register.html">注册</a>`
    }
}


//放大镜
function Enlarge(){
    $('.midd').mouseover(function(){
        $('.mark').css({display:'block'}).next().css({display:'block'})
    }).mousemove(function(e){
        var x= e.pageX-this.offsetLeft;
        var y=e.pageY-this.offsetTop;
        var left =x-$('.mark').innerWidth()/2
        var top=y-$('.mark').innerHeight()/2
        if(left<0){
            left =0
        }
        if(left>$(this).innerWidth()-$('.mark').innerWidth()){
            left =$(this).innerWidth()-$('.mark').innerWidth()
        }
        if(top<0){
            top = 0
        }
        if(top>$(this).innerHeight()-$('.mark').innerHeight()){
            top=$(this).innerHeight()-$('.mark').innerHeight()
        }
        $('.mark').css({left:left,top:top}).next().find('img').css({left:-left/$('.midd').innerWidth()*$('.big>img').innerWidth(),top:-top/$('.midd').innerHeight()*$('.big>img').innerHeight()})
    })
}
Enlarge()

function out(){ //移除事件
    $('.midd').mouseout(function(){
        $('.mark').css({display:'none'}).next().css({display:'none'})
    })
}
out()


//点击小图片事件
function cli(){
    $('.small-center img').click(function(){
       $(this).css({border:'1px solid red', boxSizing: 'border-box'}).parent().siblings().find('img').css({borderWidth:'0'}) //对小图片的边框处理

       $('.middImg').attr('src',$(this).attr('src')).next().next().find('img').attr('src',$(this).attr('src')) //小图片的src赋值给放大镜
    })

    $('.shangping3>span, .shangping4>span,.shangping5>span, .shangping7>span').click(function(){
 $(this).css({borderColor:'red', cursor:'pointer'}).siblings().css({borderColor:'gray',cursor:'pointer'})
    })
}


//放大镜
// function Enlarge(cname){
//     this.box = document.querySelector('.'+cname)
//     this.mark=this.box.querySelector('.mark')
//     this.big=this.box.querySelector('.big')
//     this.bigImg=this.box.querySelector('.big img')
//     this.middImg=this.box.querySelector('.middImg')
//     this.smallImgs= this.box.querySelectorAll('.small .small-center img')
// }
// Enlarge.prototype.init=function(){
//     for(let i=0; i<this.smallImgs.length;i++){
//         this.smallImgs[i].onclick=()=>{
//             for(var j=0;j<this.smallImgs.length;j++){
//                 this.smallImgs[j].className='';
//             }
//             this.smallImgs[i].className='active'
//             this.middImg.src=this.bigImg.src=this.smallImgs[i].src
//         }
//     }
//     this.box.onmouseover=()=>{
//         this.mark.style.display=this.big.style.display='block';
//         this.box.onmousemove =e=>{
//             var e=e||window.event;
//             var x=e.pageX
//             var y=e.pageY
//             var left =x-this.mark.offsetWidth/2-2-this.box.offsetLeft;
//             var top =y-this.mark.offsetHeight/2-2-this.box.offsetTop
//             if(left<0){
//                 left=0
//             }
//             if(top<0){
//                 top=0
//             }
//             if(left>this.box.clientWidth-this.mark.offsetWidth){
//                 left=this.box.clientWidth-this.mark.offsetWidth
//             }
//             if(top >this.box.clientHeight-this.mark.offsetHeight){
//                top= this.box.clientHeight-this.mark.offsetHeight
//             }
//             this.mark.style.left=left+'px';
//             this.mark.style.top=top+'px'
//             this.bigImg.style.left=-left/this.box.clientWidth*this.bigImg.clientWidth+'px'
//             this.bigImg.style.top=-top/this.box.clientHeight*this.bigImg.clientHeight+'px'
//         }
//     }
//     this.box.onmouseout=()=>{
//         this.mark.style.display=this.big.style.display='none';
//     }
    

// }
// var en =new Enlarge('midd')
// en.init()



var addNumber=document.querySelector('.shangping ul li dl dd:nth-of-type(1)')
var reduce=document.querySelector('.shangping ul li dl dd:nth-of-type(2)')
var s=document.querySelector('.shangping ul li dl dt')
var index
addNumber.onclick=function () { //数量加事件
    index=s.innerHTML++

}
reduce.onclick=function () { //数量减事件
    index=s.innerHTML
    index--
    if(index<1){
        index=1
    }
    s.innerHTML=index

}

// var nameID=document.querySelector('.shangping h3').innerHTML;
// var imgID= 'http://localhost//project/yjw/src/images/detail/big1.png';
// var prince=document.querySelector('.shangping span').innerHTML;
// prince=prince.slice(1)


//判断是否登录
document.querySelector('.addcartBtn').onclick=function () {
    let username =getCookie("username") 
    if(!username){
        layer.msg('先登陆',{
            icon:2,
            time:1500
        },function () {
            localStorage.setItem('url',location.href)
            location.href="login.html"
        })
    } else{
       
        var id = location.search.slice(1)
        var Number =s.innerHTML;
        var data=localStorage.getItem('data')
        var obj={
            id:id,
            nameID:'',
            imgID:null,
            prince:1499,
            Number:Number
        }
        $.ajax({
            url:'./php/detail.php',
            method:'get',
            data:{id:id},
            dataType:'json',
            success(res){
                obj={
                    id:id,
                    nameID:res.data.name,
                    imgID:res.data.img,
                    prince:res.data.price,
                    Number:Number
                }
                if(!data){ //如果本地存储中没有数据
                    layer.msg('添加成功新手机',{
                        icon:6,
                        time:1500
                    })
                    var arr=[];
                    arr.push(obj)
                    localStorage.setItem('data',JSON.stringify(arr))
                }else{ //本地存储中有数据
                    var arr=JSON.parse(data);
                    var info=arr.find(v=>v.id==obj.id)
                    console.log(info)
                    if(!info){ //本地存储的数据不是现在点击的数据
                        layer.msg('添加成功一件新手机',{
                            icon:6,
                            time:1500
                        })
                        arr.push(obj);
                        localStorage.setItem('data',JSON.stringify(arr))
                    } else{//本地存储的数据是现在点击的数据
                        layer.msg('此商品已经添加过购物车了',{
                            icon:6,
                            time:1500
                        })
                        info.Number=obj.Number;
                        localStorage.setItem('data',JSON.stringify(arr))
                    }
                }
            }
        })

        // let obj={
        //     nameID,
        //     imgID,
        //     prince,
        //     Number:s.innerHTML
        // }
        // var data=localStorage.getItem('data')
        // if(!data){
        //     var arr=[]
        // arr.push(obj)
        // var data=JSON.stringify(arr)
        // localStorage.setItem('data',data)
        // }else{
        //     var arr=JSON.parse(data)
        //     arr.push(obj)
        //     var data=JSON.stringify(arr)
        //     localStorage.setItem('data', data)
        // }
        
    }
    return false;
}


//通过id用ajax请求数据渲染
function fn(){
    var id = location.search.slice(1)
    var index =layer.load(1,{shade:[0.5,'#000']})
    $.ajax({
        url:'./php/detail.php',
        method:'get',
        dataType:'json',
        data:{id:id},
        success(res){
            console.log(res)
            var str ='';
            var image =''
                str =`<h3>${res.data.name}</h3>
                <div class="shangping1">
                    <p>价        格<span>¥${res.data.price}.00 </span>
                    </p> 
                    <p>促        销<b>赠送积分</b>
                    购买即赠商城积分，积分可抵现~</p>
                </div>`
                image =`<img src="${res.data.img}" class="middImg">
                <div class="mark"></div>
                <div class="big">
                    <img src="${res.data.img}">
                </div>
                <div class="small">
                    <span><</span>
                    <div class="small-center">
                    <a href="javascript:;"> <img src="${res.data.img}" ></a>
                    <a href="javascript:;"> <img src="./images/detail/big2.png"></a>
                    <a href="javascript:;"> <img src="./images/detail/big3.png"></a>
                    <a href="javascript:;"> <img src="./images/detail/big4.png"></a>
                    <a href="javascript:;"> <img src="./images/detail/big5.png"></a>
                    <a href="javascript:;"> <img src="./images/detail/big6.png"></a>
                    <a href="javascript:;"> <img src="./images/detail/big7.png"></a>
                    </div>
                    <span>></span>
                    </div>`


            document.querySelector('.sp').innerHTML=str;
            document.querySelector('.midd').innerHTML=image;
            cli()
            layer.close(index)
        }
    })
}
fn()
